<template>
<view class="product-list-box">
  <view class="padding-lr padding-bottom flex flex-wrap justify-between" v-if="hasData">
    <view class="product-list-item margin-top bg-white shadow shadow-lg" v-for="(item, index) in productList" :key="index" @tap="onTapProduct(item)">
      <view class="product-img-box bg-white">
        <lazy-img :src="BASE_URL + item.image_logo" width="100%" height="310rpx" mode="aspectFit"></lazy-img>
        <view class="product-tag cu-tag bg-blue" v-if="item.tag">{{item.tag}}</view>
      </view>
      <view class="content padding-sm">
        <view class="title text-cut text-black text-lg">{{item.title}}</view>
        <view class="label flex justify-between text-sm text-gray margin-top-xs">
          <text>{{item.isnodeposit ? '可免' : item.nodeposit }}押金</text>
          <text>{{item.rentday}}{{RETUNIT_LIST[item.rentunit]}}起租</text>
        </view>
        <view class="price main-color text-price text-lg text-right margin-top-sm">{{item.avg_price}}/{{RETUNIT_LIST[item.rentunit]}}</view>
      </view>
    </view>
  </view>
  <view class="text-center text-gray" v-if="hasData">已经到底了</view>
  <view class="no-data h100 bg-white text-xl flex align-center justify-center flex-direction" v-if="!hasData">
    <image src="/static/no_data.png" mode="aspectFit"></image>
    <view>暂无数据, 请<text class="text-orange" @tap="gotoHomePage">返回首页</text>浏览</view>
  </view>
</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'product-list', // 产品列表
  data () {
    return {
      keyword: 0,
      productList: []
    }
  },
  computed: {
    ...mapState([
      'BASE_URL',
      'RETUNIT_LIST',
      'PRODUCT_TYPE_LIST'
    ]),
    hasData() {
      return this.productList && this.productList.length > 0
    }
  },
  onLoad() {
    this.keyword = this.$Route.query.keyword
    const navTitle = this.PRODUCT_TYPE_LIST[this.keyword]
    this.$store.dispatch('setPageTitle', navTitle)
    this.init()
  },
  /**
   * TODO 上拉加载更多
   */
  onReachBottom() {
    console.log('上拉刷新')
    // this.productList.push(...ADD_LIST)
  },
  methods: {
    async init() {
      this.productList = await this.getProductList(this.keyword)
    },
    onTapProduct(item) {
      const { id } = item
      console.log('点击产品', item.id)
      this.$Router.push({
        name: 'product-details',
        params: { id }
      })
    },
    /** 获取产品列表 */
    getProductList(keyword) {
      const params = {
        page: 1,
        pageSize: 20,
        keyword
      }
      return new Promise(resolve => {
        this.$api.getProductList(params).then(res => {
          console.log('获取产品列表', res)
          if (!res) return
          const resData = res.data
          resolve(resData.list)
        })
      })
    },
    gotoHomePage() {
      this.$Router.pushTab({ name: 'home' })
    }
  }
}
</script>

<style lang="less">
.product-list {
  &-item {
    width: 48%;
    height: 510rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2);

    .product-img-box {
      position: relative;
      width: 100%;
      height: 320rpx;
      border-bottom: 2rpx solid #eee;
    }

    .product-img {
      width: 100%;
      height: 310rpx;
    }

    .product-tag {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
